<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<title>优客书城数据页</title>
<!--		<link type="text/css" rel="stylesheet" href="../static/dist/css/bootstrap.min.css">-->
<!--		<link rel="stylesheet" type="text/css" href="../static/css/index.css" />-->
<!--		<link rel="stylesheet" type="text/css" href="../static/css/animate.css" />-->
	</head>

	<body>
		<div class="row">
<!--			book是for each对象，bookList是后台的列表值-->
			<div class="container">
				<div class="col-sm-6 col-md-3" th:each="book:${bookList}">
					<div class="thumbnail">
						<a href="details.html"><img src="/images/beiwei78.jpg" th:src="@{'/images/'+${book.imgUrl}}" alt="通用的占位符缩略图"></a>
						<div class="caption">
							<h3 th:classappend="h3-height" th:text="${book.name}">北纬78°</h3>
							<p th:classappend="p-height">价格:<span th:text="${book.newPrice}">19.5</span>元&nbsp;&nbsp;作者:<span th:text="${book.author}">陈丹燕</span>&nbsp;&nbsp;</p>
							<p>
								<a href="details.html">
									更多信息
								</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		<!--分页-->
		<div class="container">
			<ul class="pager">
				<li th:classappend="${cur == 1 } ? 'disabled' : ''">
					<a th:style="${cur == 1 } ? 'pointer-events:none' : ''" href="javascript:void(0)" th:onclick="|loadData(${pre},${category})|">←上一页</a>
				</li>
				<li th:classappend="${cur == pages } ? 'disabled' : ''">
					<a th:style="${cur == pages} ? 'pointer-events:none' : ''" href="javascript:void(0)" th:onclick="|loadData(${next},${category})|">下一页 →</a>
				</li>
			</ul>
		</div>
	</div>
	</body>

</html>